<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(243, 245, 247, 1);
            padding-bottom: 50px;
        }

        span {
            width: fit-content;
            height: fit-content;
            min-width: fit-content;
            min-height: fit-content;
        }

        .item {
            margin-bottom: 10px;
            background: rgba(255, 255, 255, 1);
            overflow: hidden;
        }

        .row {
            margin: 15px;
        }

        .goods-image {
            width: 50px;
            height: 70px;
            margin-right: 15px;
        }

        .goods-score {
            font-size: 15px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
        }

        .goods-starts {
            margin-top: 8px;
        }

        .goods-starts .start {
            width: 20px;
            height: 20px;
            margin-right: 12px;
        }

        .comment {
            position: relative;
            width: 100%;
            height: 120px;
        }

        .comment textarea {
            width: 100%;
            height: 80px;
            font-size:15px;
            font-weight:400;
            line-height:21px;
        }

        .comment textarea::placeholder {
            font-size:15px;
            font-weight:400;
            color:rgba(191,191,191,1);
            line-height:21px;
        }

        .comment .length {
            height: 40px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .comment::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgba(212, 212, 212, 1);
            transform: scaleY(0.5);
        }

        .justify-start {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .justify-end {
            font-size: 15px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }


        .images {
            flex-wrap: wrap;
            overflow: hidden;
        }

        .image {
            position: relative;
            width: 33.333%;
            height: 33vw;
            padding: 7.5px;
        }

        .close {
            position: absolute;
            right: 0;
            top: 0;
            width: 16px;
            height: 16px;
        }

        .add {
            height: 100%;
            background: rgba(235, 235, 235, 1);
        }

        .icon {
            width: 28px;
            height: 28px;
        }

        .btn-submit--blue {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: rgba(90, 194, 255, 1);
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="item" v-for="item, index in orderItemList">
            <div class="row" data-flex="cross:center">
                <div class="goods-image">
                    <img :src="item.productPic" width="100%" height="100%" alt="">
                </div>
                <div>
                    <div class="goods-score">
                        <span>{{ getStarText(item.stars)}}</span>
                    </div>
                    <div class="goods-starts" data-flex="cross:center">
                        <div class="start" v-for="star in 5" @click="handleStar(index,star)">
                            <img :src="item.stars >= star ? '../../image/ui/start_active.png' :'../../image/ui/start_unactive.png'" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="comment">
                    <textarea placeholder="宝贝是否满足期待说说您的使用心得分享给其他想购买的朋友吧" v-model="item.textarea" maxlength="100"></textarea>
                    <div class="length" data-flex="main:right cross:center">{{ item.textarea.length }}/100</div>
                </div>
            </div>
            <div class="row">
                <div data-flex="main:justify cross:center">
                    <div class="justify-start">上传图片</div>
                    <div class="justify-end">最多{{maxUploadCount}}张</div>
                </div>
            </div>
            <div class="row" style="margin: 7.5px">
                <div class="images" data-flex>
                    <div class="image" v-for="img,_index in item.images">
                        <img :src="img" alt="">
                        <div class="close" @click="deleteImg(index, _index)">
                            <img src="../../image/ui/close.png" alt="">
                        </div>
                    </div>
                    <div class="image" v-if="item.images.length < maxUploadCount">
                        <div class="add" data-flex="main:center cross:center" @click="uploadImg(index)">
                            <div class="icon">
                                <img src="../../image/ui/add_2.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-submit--blue" data-flex="main:center cross:center" @click="submitFn()">
            提交
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-pic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var currentUploadIndex = -1;
    var pageParam;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInitAliYunOss();
        api.addEventListener({
            name: 'uploadSuccess'
        }, function (ret) {
            // 拿到上传完成后的图片列表
            var imgs = ret.value.imgs,
                item = vm.orderItemList[currentUploadIndex];
            var images = item.images || [];
            images = images.concat(imgs);
            item.consultPic = images.join(',');
            item.images = images;
            updateHtml();
            currentUploadIndex = -1;
        })
        fnInit();
    };

    // 初始化
    function fnInit() {
        pageParam.orderItemList = setPropertyInArray(pageParam.orderItemList, 'images', []);
        pageParam.orderItemList = setPropertyInArray(pageParam.orderItemList, 'stars', -1);
        pageParam.orderItemList = setPropertyInArray(pageParam.orderItemList, 'textarea', '');
        pageParam.orderItemList = setPropertyInArray(pageParam.orderItemList, 'consultPic', '');
        vm = new Vue({
            el: '.vueApp',
            data: {
                maxUploadCount: 6,
                orderId: pageParam.orderId,
                orderItemList: pageParam.orderItemList
            },
            methods: {
                getStarText: function(num) {
                    var msgList = ['', '非常差', '差', '一般', '好', '非常好'];
                    return msgList[num] || '请打分';
                }
            }
        });
    }

    function submitFn() {
        var list = checkSubmitData();
        if(!list.length) {
            fnToast('不能有空的必填项');
            return;
        }
        var url = 'single/oms/orderevaluate';
        var params = {
            'orderId': vm.orderId,
            'Array': list
        };
        var callback = function (data) {
            fnOpenPublicWin(
                '评价成功',
                'teacher/assess_end'
            );
            api.execScript({
                name: pageParam.winName,
                frameName: pageParam.frameName,
                script: 'getData()'
            })
            fnDelayCloseWin(500);
        };
        MALLPOSTARRAY(url, params, callback);
    }

    // 校验数据  星级和评论内容不能为空
    function checkSubmitData() {
        var result = [];
        for(var i = 0; i < vm.orderItemList.length; i ++) {
            var item = vm.orderItemList[i];
            var temp = {
                goodsId: item.productId,
                stars: item.stars,
                textarea: item.textarea,
                consultPic: item.consultPic
            };
            result.push(temp);
            if(vm.orderItemList[i].stars === -1) {
                result = [];
                break;
            }else if(!vm.orderItemList[i].textarea) {
                result = [];
                break;
            }
        }
        return result;
    }

    function handleStar(index, _index) {
        var item = vm.orderItemList[index];
        item.stars = _index;
        
        updateHtml();
    }

    function uploadImg(index) {
        var images = vm.orderItemList[index].images || [];
        currentUploadIndex = index;
        fnUploadImg(vm.maxUploadCount - images.length, 'uploadSuccess');
    }

    // 更新页面
    function updateHtml() {
        var list = deepCopy(vm.orderItemList);
        vm.orderItemList = list;
    }

    function deleteImg(index, _index) {
        var item = vm.orderItemList[index];
        var images = item.images || [];
        images.splice(_index, 1);
        
        item.consultPic = images.join(',');
        updateHtml();
    }
</script>

</html>